<template>
  <section class="contianer">
    <p class="breadcrumb">
      <span class="breadcrumbBack" @click="$router.back()">
        <i class="iconfont gonglue">&#xe605;</i> 旅游攻略
      </span> /
      攻略详情
    </p>
    <el-row type="flex" class="row-bg" justify="space-between">
      <div class="main">
        <detailMain :dataList="postList" />
        <!-- 评论与分享 -->
        <div class="post-ctrl">
          <el-row type="flex" class="row-bg" justify="center">
            <div class="ctrl-item">
              <span class="iconfont">&#xe73e;</span>
              <p>评论({{ total }})</p>
            </div>
            <div class="ctrl-item">
              <span v-if="collectState" class="iconfont" @click="collectPost()">&#xe671;</span>
              <span v-else class="iconfont" @click="collectPost()">&#xe670;</span>
              <p>收藏</p>
            </div>
          </el-row>
        </div>
        <commentWrapper @setTotal="setTotal" />
      </div>
      <div class="adise">
        <detailAdise />
      </div>
    </el-row>
  </section>
</template>

<script>
import detailMain from "@/components/post/detailMain";
import detailAdise from "@/components/post/detailAdise";
import commentWrapper from "@/components/post/commentWrapper";
export default {
  components: {
    detailMain,
    detailAdise,
    commentWrapper,
  },
  data() {
    return {
      postList: "",
      total: "",
      collectState: false,
    };
  },
  watch: {
    //监听路由

    $route() {
      // console.log(this.$route);
      this.loadPage();
    },
  },
  mounted() {
    this.loadPage();
  },

  methods: {
    loadPage() {
      let id = this.$route.query.id;
      this.$axios({
        url: "/posts",
        params: {
          id,
        },
      }).then((res) => {
        console.log(res);
        this.total = res.data.total;
        this.postList = res.data.data;
      });
    },
    setTotal(total) {
      this.total = total;
    },
    //收藏文章
    collectPost() {
      let id = this.$route.query.id;
      this.$axios({
        url: "/posts/star?id=" + id,
        headers: {
          Authorization: "Bearer " + this.$store.state.user.userInfo.token,
        },
      })
        .then((res) => {
          // console.log(res);
          if (res.data.messge == "收藏成功") {
            this.collectState = true;
          }
        })
        .catch((err) => {
          console.log(err.response);
          console.log(err.response.data.message);
          if (err.response.data.message == "已收藏") {
            this.collectState = true;
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
.contianer {
  width: 1000px;
  margin: 20px auto;
  .breadcrumb {
    cursor: pointer;
    font-size: 14px;
    color: #333;
    .breadcrumbBack {
      font-weight: 600;
      .gonglue {
        color: seagreen;
      }
    }
  }
  .main {
    width: 700px;
    .post-ctrl {
      margin-top: 20px;
      .ctrl-item {
        cursor: pointer;
        margin: 0 20px;
        text-align: center;
        .iconfont {
          font-size: 40px;
          color: orange;
        }
        p {
          color: #999;
        }
      }
    }
  }
  .adise {
    width: 280px;
  }
}
</style>
